<template>
	<view class="container">
		<!-- 顶部标题区域 -->
		<view class="header">
			<view class="title-section">
				<input 
					class="title-input"
					type="text"
					v-model="auctionTitle"
					placeholder="填写拍品名称"
					placeholder-class="placeholder"
				/>
				<!-- <view class="title-action">商品库 ></view> -->
			</view>
			<view class="subtitle">
				<textarea 
					class="auction-description"
					v-model="auctionDescription"
					placeholder="添加关于此次拍卖的说明，详尽完善的信息填写有助于买家出价"
					placeholder-class="placeholder"
					maxlength="500"
					:auto-height="true"
				/>
				<text class="word-count">{{auctionDescription.length}}/500</text>
			</view>
		</view>

		<!-- 图片上传区域 -->
		<view class="upload-section">
			<view class="image-list">
				<view class="image-item" v-for="(item, index) in imageList" :key="index">
					<image :src="item" mode="aspectFill" class="preview-image"></image>
					<view class="delete-btn" @click.stop="deleteImage(index)">
						<text class="delete-icon">×</text>
					</view>
				</view>
				<view class="upload-box" @click="chooseImage" v-if="imageList.length < 3">
					<view class="plus-icon"></view>
				</view>
			</view>
		</view>

		<!-- 设置列表 -->
		<view class="settings-list">
			<view class="setting-item">
				<view class="setting-title">设置价格</view>
				<view class="setting-value">
					<input 
						type="number" 
						v-model="auctionPrice" 
						placeholder="请输入价格" 
						placeholder-class="placeholder"
						class="price-input"
					/>
				</view>
			</view>
			<view class="setting-item" @click="showStartTimePicker">
				<view class="setting-title">开始时间</view>
				<view class="setting-value">
					<text>{{startTime || '请选择'}}</text>
					<text class="setting-arrow">></text>
				</view>
			</view>
			<view class="setting-item" @click="showEndTimePicker">
				<view class="setting-title">结束时间</view>
				<view class="setting-value">
					<text>{{endTime ? formatDate(endDate) + ' ' + endTime : '请选择'}}</text>
					<text class="setting-arrow">></text>
				</view>
			</view>
			<view class="setting-item description">
				<view class="setting-title">拍品介绍</view>
				<view class="setting-value">
					<input 
						type="text" 
						v-model="auctionDescription" 
						placeholder="请输入拍品介绍" 
						placeholder-class="placeholder"
						class="description-input"
					/>
				</view>
			</view>
		</view>

		<!-- 促销设置 -->
		<view class="promotion-section">
			<!-- <view class="promotion-item">
				<view class="promotion-left">
					<text>开启促销活动</text>
					<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
				</view>
				<switch class="promotion-switch" />
			</view> -->
			<!-- <view class="promotion-item">
				<view class="promotion-left">
					<text>发布到首页市集</text>
					<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
				</view>
				<switch class="promotion-switch" />
			</view> -->
			<!-- 交易方式 -->
			<view class="promotion-item">
				<view class="promotion-left">
					<text>交易方式</text>
				</view>
				<view class="setting-value" @click="toggleTradeType">
					<text>{{tradeTypeText}}</text>
					<text class="setting-arrow">></text>
				</view>
			</view>
			<view v-if="showTradeTypePicker" class="dropdown-content trade-dropdown">
				<view 
					class="dropdown-item" 
					:class="{'selected': selectedTradeType === 1}"
					@click="selectTradeType(1)"
				>
					<view class="trade-info">
						<text class="trade-text">双方自行交易</text>
						<text class="trade-desc">买卖双方自行协商交易方式</text>
					</view>
					<text class="check-icon" v-if="selectedTradeType === 1">✓</text>
				</view>
				<view 
					class="dropdown-item" 
					:class="{'selected': selectedTradeType === 2}"
					@click="selectTradeType(2)"
				>
					<view class="trade-info">
						<text class="trade-text">平台担保交易</text>
						<text class="trade-desc">平台提供担保，买家付款后卖家发货</text>
					</view>
					<text class="check-icon" v-if="selectedTradeType === 2">✓</text>
				</view>
			</view>
			<!-- 高级设置 -->
			<view class="promotion-item" @click="toggleAdvancedSettings">
				<view class="promotion-left">
					<text>高级设置</text>
				</view>
				<view class="setting-value">
					<text class="setting-desc">可调整延时时长、限制加价幅度、设置分享佣金</text>
					<text class="setting-arrow" :class="{'arrow-rotate': showAdvancedSettings}">></text>
				</view>
			</view>
		</view>
		
		<!-- 高级设置展开内容 -->
		<view class="advanced-settings" v-if="showAdvancedSettings">
			<view class="setting-item">
				<view class="setting-title">
					<text>延时时长</text>
					<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
				</view>
				<view class="setting-value" @click="toggleDelayPicker">
					<text>{{delayTime || '10秒'}}</text>
					<text class="setting-arrow">></text>
				</view>
				<view v-if="showDelayPicker" class="dropdown-content delay-dropdown">
					<view class="delay-header">
						<text class="cancel-btn" @click="toggleDelayPicker">取消</text>
						<text class="title">延时时长</text>
						<text class="confirm-btn" @click="confirmDelay">确认</text>
					</view>
					<view class="delay-content">
						<view class="delay-label">延时时长</view>
						<picker-view 
							class="delay-picker-view" 
							:value="[delayIndex]" 
							@change="onDelayChange"
							:indicator-style="indicatorStyle"
						>
							<picker-view-column>
								<view class="picker-item" v-for="seconds in delayOptions" :key="seconds">
									<text>{{seconds}}秒</text>
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-title">
					<text>限制加价幅度</text>
					<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
				</view>
				<view class="setting-value" @click="togglePriceLimitPicker">
					<text>{{priceLimit || '不限制'}}</text>
					<text class="setting-arrow">></text>
				</view>
				<view v-if="showPriceLimitPicker" class="dropdown-content price-limit-dropdown">
					<view class="delay-header">
						<text class="cancel-btn" @click="togglePriceLimitPicker">取消</text>
						<text class="title">限制加价幅度</text>
						<text class="confirm-btn" @click="confirmPriceLimit">确认</text>
					</view>
					<view class="delay-content">
						<view class="delay-label">加价幅度</view>
						<picker-view 
							class="delay-picker-view" 
							:value="[priceLimitIndex]" 
							@change="onPriceLimitChange"
							:indicator-style="indicatorStyle"
						>
							<picker-view-column>
								<view class="picker-item" v-for="(item, index) in priceLimitOptions" :key="index">
									<text>{{item.text}}</text>
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
			<!-- <view class="setting-item">
				<view class="setting-title">
					<text>开启分享佣金</text>
					<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
				</view>
				<switch :checked="enableCommission" @change="onCommissionChange" class="commission-switch" />
			</view> -->
			<!-- <view class="setting-item">
				<view class="setting-title">
					<text>仅订阅者可参与</text>
					<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
				</view>
				<switch :checked="onlyVerifiedUsers" @change="onVerifiedUsersChange" class="verified-switch" />
			</view> -->
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="bottom-buttons">
			<button class="submit-btn">发起拍卖</button>
		</view>

		<!-- 时间选择弹出层 -->
		<view class="popup" v-if="showTimePicker">
			<view class="popup-mask" @click="closeTimePicker"></view>
			<view class="popup-content">
				<view class="popup-header">
					<text class="cancel-btn" @click="closeTimePicker">取消</text>
					<text class="title">{{isStartTime ? '拍卖开始时间' : '结束时间'}}</text>
					<text class="confirm-btn" @click="confirmTime">确认</text>
				</view>
				<view class="time-list">
					<!-- 开始时间选择 -->
					<template v-if="isStartTime">
						<view class="picker-container">
							<picker-view 
								class="picker-view" 
								:indicator-style="indicatorStyle"
								:value="[dateIndex, hourIndex, minuteIndex]"
								@change="onPickerChange"
							>
								<picker-view-column>
									<view class="picker-item" v-for="(date, index) in dateList" :key="index">
										{{formatDate(date)}}
									</view>
								</picker-view-column>
								<picker-view-column>
									<view class="picker-item" v-for="(hour, index) in hourList" :key="index">
										{{hour}}时
									</view>
								</picker-view-column>
								<picker-view-column>
									<view class="picker-item" v-for="(minute, index) in minuteList" :key="index">
										{{minute}}分
									</view>
								</picker-view-column>
							</picker-view>
						</view>
					</template>
					
					<!-- 结束时间选择 -->
					<template v-else>
						<view class="picker-container">
							<picker-view 
								class="picker-view" 
								:indicator-style="indicatorStyle"
								:value="[endDateIndex, endHourIndex, endMinuteIndex]"
								@change="onEndPickerChange"
							>
								<picker-view-column>
									<view class="picker-item" v-for="(date, index) in endDateList" :key="index">
										{{formatDate(date)}}
									</view>
								</picker-view-column>
								<picker-view-column>
									<view class="picker-item" v-for="(hour, index) in hourList" :key="index">
										{{hour}}时
									</view>
								</picker-view-column>
								<picker-view-column>
									<view class="picker-item" v-for="(minute, index) in minuteList" :key="index">
										{{minute}}分
									</view>
								</picker-view-column>
							</picker-view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<!-- 交易方式选择弹出层 -->
		<view class="popup" v-if="showTradeTypePicker">
			<view class="popup-mask" @click="closeTradeTypePicker"></view>
			<view class="popup-content">
				<view class="popup-header">
					<text class="cancel-btn" @click="closeTradeTypePicker">取消</text>
					<text class="title">交易方式</text>
					<text class="confirm-btn" @click="confirmTradeType">确认</text>
				</view>
				<view class="trade-type-list">
					<view 
						v-for="(item, index) in tradeTypeOptions" 
						:key="index"
						class="trade-type-item"
						:class="{'selected': selectedTradeType === item.value}"
						@click="selectTradeType(item.value)"
					>
						<view class="trade-type-info">
							<text class="trade-type-title">{{item.label}}</text>
							<text class="trade-type-desc">{{item.desc}}</text>
						</view>
						<view class="trade-type-check" v-if="selectedTradeType === item.value">
							<image src="/static/icons/check.png" mode="aspectFit" class="check-icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showTimePicker: false,
			isStartTime: true,
			startTime: '',
			endTime: '',
			selectedEndTime: 2,
			endTimeOptions: [2, 4, 8, 12, 24],
			today: new Date().toISOString().split('T')[0],
			maxDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
			selectedDate: new Date().toISOString().split('T')[0],
			selectedTime: '12:00',
			recommendedTime: '15:00',
			// 新增结束时间相关数据
			isCustomEnd: false,
			showCustomEndTimeSelect: false,
			endDate: new Date().toISOString().split('T')[0],
			startDate: '',
			maxEndDate: new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], // 60天后
			// 交易方式相关数据
			showTradeTypePicker: false,
			selectedTradeType: 1,
			tradeTypeOptions: [
				{
					value: 1,
					label: '双方自行交易',
					desc: '买卖双方自行协商交易方式'
				},
				{
					value: 2,
					label: '平台担保交易',
					desc: '平台提供担保，买家付款后卖家发货'
				}
			],
			auctionTitle: '', // 新增拍品名称数据
			auctionPrice: '', // 新增拍品价格数据
			auctionDescription: '', // 新增拍品描述数据
			imageList: [], // 修改为数组存储多张图片
			// 高级设置相关数据
			showAdvancedSettings: false,
			delayTime: '10秒',
			priceLimit: '不限制',
			enableCommission: false,
			onlyVerifiedUsers: false,
			showDelayPicker: false,
			selectedDelay: 60,
			delayIndex: 0,
			delayOptions: Array.from({length: 13}, (_, i) => (i + 1) * 15), // 生成15秒间隔的数组，到180秒
			indicatorStyle: 'height: 80rpx; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee;',
			showPriceLimitPicker: false,
			priceLimitIndex: 0,
			priceLimitOptions: [
				{ value: 'none', text: '不限制' },
				{ value: 'each', text: '每次仅允许加一手' }
			],
			startTimeOptions: ['15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
			selectedStartTimeIndex: -1,
			dateList: [],
			timeList: [],
			dateIndex: 0,
			timeIndex: 0,
			hourList: [],
			minuteList: [],
			hourIndex: 0,
			minuteIndex: 0,
			endDateList: [],
			endDateIndex: 0,
			endHourIndex: 0,
			endMinuteIndex: 0,
		}
	},
	computed: {
		tradeTypeText() {
			const option = this.tradeTypeOptions.find(item => item.value === this.selectedTradeType);
			return option ? option.label : '请选择';
		}
	},
	methods: {
		showStartTimePicker() {
			this.isStartTime = true;
			this.showTimePicker = true;
			this.initDateTimeData();
		},
		showEndTimePicker() {
			this.isStartTime = false;
			this.showTimePicker = true;
			this.initEndDateTimeData();
		},
		closeTimePicker() {
			this.showTimePicker = false;
			this.showCustomEndTimeSelect = false;
		},
		confirmTime() {
			if (this.isStartTime) {
				this.startTime = `${this.formatDate(this.selectedDate)} ${this.selectedTime}`;
				this.startDate = this.selectedDate;
				this.initEndDateTimeData(); // 重新初始化结束时间的日期范围
			} else {
				// 验证结束时间是否合法
				const startDateTime = new Date(`${this.startDate}T${this.selectedTime}`);
				const endDateTime = new Date(`${this.endDate}T${this.endTime}`);
				const diffHours = Math.ceil((endDateTime - startDateTime) / (1000 * 60 * 60));
				
				if (diffHours <= 0) {
					uni.showToast({
						title: '结束时间必须晚于开始时间',
						icon: 'none'
					});
					return;
				}
				
				if (diffHours > 168) { // 7天 = 168小时
					uni.showToast({
						title: '拍卖时长不能超过7天',
						icon: 'none'
					});
					return;
				}
			}
			this.closeTimePicker();
		},
		initDateTimeData() {
			// 生成未来30天的日期列表
			const dates = [];
			const now = new Date();
			for(let i = 0; i < 30; i++) {
				const date = new Date(now);
				date.setDate(now.getDate() + i);
				dates.push(date.toISOString().split('T')[0]);
			}
			this.dateList = dates;
			
			// 生成时间列表 (每半小时一个选项)
			const times = [];
			for(let hour = 0; hour < 24; hour++) {
				const hourStr = hour.toString().padStart(2, '0');
				times.push(`${hourStr}:00`);
				times.push(`${hourStr}:30`);
			}
			this.timeList = times;
			
			// 设置默认选中的当前时间
			const currentHour = now.getHours();
			const currentMinute = now.getMinutes();
			this.dateIndex = 0;
			this.timeIndex = currentHour * 2 + (currentMinute >= 30 ? 1 : 0);
			
			// 生成小时列表
			this.hourList = Array.from({length: 24}, (_, i) => i.toString());
			
			// 生成分钟列表
			this.minuteList = Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0'));
			
			// 设置默认选中的当前时间
			this.hourIndex = currentHour;
			this.minuteIndex = currentMinute;
		},
		initEndDateTimeData() {
			// 生成从开始日期起的未来7天日期列表
			const dates = [];
			const startDate = this.startDate ? new Date(this.startDate) : new Date();
			for(let i = 0; i < 7; i++) {
				const date = new Date(startDate);
				date.setDate(startDate.getDate() + i);
				dates.push(date.toISOString().split('T')[0]);
			}
			this.endDateList = dates;
			
			// 如果已有结束时间，设置对应的索引
			if (this.endTime && typeof this.endTime === 'string' && this.endTime.includes(':')) {
				const [hour, minute] = this.endTime.split(':');
				this.endHourIndex = parseInt(hour);
				this.endMinuteIndex = parseInt(minute);
				this.endDateIndex = 0; // 默认选中第一天
			} else {
				// 默认设置为开始时间后2小时
				const currentHour = (startDate.getHours() + 2) % 24;
				this.endHourIndex = currentHour;
				this.endMinuteIndex = startDate.getMinutes();
				this.endDateIndex = 0;
			}
		},
		onPickerChange(e) {
			const values = e.detail.value;
			this.dateIndex = values[0];
			this.hourIndex = values[1];
			this.minuteIndex = values[2];
			
			// 更新选中的日期和时间
			this.selectedDate = this.dateList[this.dateIndex];
			const hour = this.hourList[this.hourIndex].padStart(2, '0');
			const minute = this.minuteList[this.minuteIndex];
			this.selectedTime = `${hour}:${minute}`;
		},
		onEndPickerChange(e) {
			const values = e.detail.value;
			this.endDateIndex = values[0];
			this.endHourIndex = values[1];
			this.endMinuteIndex = values[2];
			
			// 更新选中的日期和时间
			this.endDate = this.endDateList[this.endDateIndex];
			const hour = this.hourList[this.endHourIndex].padStart(2, '0');
			const minute = this.minuteList[this.endMinuteIndex];
			this.endTime = `${hour}:${minute}`;
		},
		// 推荐时间改变
		onRecommendedTimeChange(e) {
			this.recommendedTime = e.detail.value;
			this.selectedTime = e.detail.value;
		},
		// 格式化日期显示
		formatDate(dateStr) {
			const date = new Date(dateStr);
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const today = new Date();
			const isToday = date.toDateString() === today.toDateString();
			const isTomorrow = date.toDateString() === new Date(today.setDate(today.getDate() + 1)).toDateString();
			
			let dateText = `${month}月${day}日`;
			if (isToday) {
				dateText += ' (今天)';
			} else if (isTomorrow) {
				dateText += ' (明天)';
			}
			return dateText;
		},
		// 显示自定义结束时间选择
		showCustomEndTime() {
			this.isCustomEnd = true;
			this.showCustomEndTimeSelect = true;
			this.selectedEndTime = null;
		},
		// 选择预设时长
		selectEndTime(hours) {
			this.selectedEndTime = hours;
			this.isCustomEnd = false;
			this.showCustomEndTimeSelect = false;
		},
		// 显示交易方式选择器
		toggleTradeType() {
			this.showTradeTypePicker = !this.showTradeTypePicker;
		},
		
		// 关闭交易方式选择器
		closeTradeTypePicker() {
			this.showTradeTypePicker = false;
		},
		
		// 选择交易方式
		selectTradeType(type) {
			this.selectedTradeType = type;
			this.showTradeTypePicker = false;
		},
		
		// 确认交易方式选择
		confirmTradeType() {
			this.closeTradeTypePicker();
		},
		// 选择图片
		chooseImage() {
			const count = 3 - this.imageList.length; // 计算还可以选择的图片数量
			uni.chooseImage({
				count: count,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					// 将新选择的图片添加到列表中
					this.imageList = [...this.imageList, ...tempFilePaths];
					
					// 实际项目中，这里应该调用上传接口
					// tempFilePaths.forEach(path => {
					//     this.uploadImage(path);
					// });
				},
				fail: (err) => {
					console.error('选择图片失败：', err);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 删除图片
		deleteImage(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这张图片吗？',
				success: (res) => {
					if (res.confirm) {
						this.imageList.splice(index, 1);
						// 这里可以添加删除服务器图片的逻辑
						// this.deleteServerImage(this.imageList[index]);
					}
				}
			});
		},
		
		// 上传图片到服务器
		uploadImage(filePath) {
			uni.uploadFile({
				url: '你的上传接口地址',
				filePath: filePath,
				name: 'file',
				success: (res) => {
					const data = JSON.parse(res.data);
					if (data.code === 0) {
						// 更新对应图片的URL
						const index = this.imageList.indexOf(filePath);
						if (index !== -1) {
							this.$set(this.imageList, index, data.data.url);
						}
					} else {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('上传失败：', err);
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 删除服务器图片
		deleteServerImage(imageUrl) {
			// 调用删除接口
			uni.request({
				url: '你的删除接口地址',
				method: 'POST',
				data: {
					imageUrl: imageUrl
				},
				success: (res) => {
					if (res.data.code === 0) {
						// 从列表中移除该图片
						this.imageList = this.imageList.filter(url => url !== imageUrl);
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('删除失败：', err);
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			});
		},
		// 切换高级设置显示状态
		toggleAdvancedSettings() {
			this.showAdvancedSettings = !this.showAdvancedSettings;
		},
		
		// 切换延时时长选择器
		toggleDelayPicker() {
			this.showDelayPicker = !this.showDelayPicker;
		},
		
		// 延时时长改变
		onDelayChange(e) {
			const index = e.detail.value[0];
			this.delayIndex = index;
			this.selectedDelay = this.delayOptions[index];
		},
		
		// 确认延时时长
		confirmDelay() {
			this.delayTime = this.selectedDelay + '秒';
			this.showDelayPicker = false;
		},
		
		// 切换加价幅度限制选择器
		togglePriceLimitPicker() {
			this.showPriceLimitPicker = !this.showPriceLimitPicker;
		},
		
		// 加价幅度限制改变
		onPriceLimitChange(e) {
			const index = e.detail.value[0];
			this.priceLimitIndex = index;
		},
		
		// 确认加价幅度限制
		confirmPriceLimit() {
			const selected = this.priceLimitOptions[this.priceLimitIndex];
			this.priceLimit = selected.text;
			this.showPriceLimitPicker = false;
		},
		
		// 分享佣金开关变化
		onCommissionChange(e) {
			this.enableCommission = e.detail.value;
		},
		
		// 仅限认证用户开关变化
		onVerifiedUsersChange(e) {
			this.onlyVerifiedUsers = e.detail.value;
		},
		selectStartTime(index) {
			this.selectedStartTimeIndex = index;
			this.selectedTime = this.startTimeOptions[index];
		},
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

.header {
	background-color: #fff;
	padding: 30rpx;
}

.title-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.title-input {
	flex: 1;
	height: 80rpx;
	font-size: 32rpx;
	color: #333;
	padding: 0 20rpx;
	background-color: #fff;
	border: none;
}

.placeholder {
	color: #999;
}

.title-action {
	font-size: 28rpx;
	color: #666;
}

.subtitle {
	font-size: 26rpx;
	color: #999;
	line-height: 1.4;
}

.upload-section {
	background-color: #fff;
	padding: 30rpx;
	margin-top: 20rpx;
}

.image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.image-item {
	width: 200rpx;
	height: 200rpx;
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
}

.preview-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.delete-btn {
	position: absolute;
	top: 8rpx;
	right: 9rpx;
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.delete-icon {
	font-size: 40rpx;
	line-height: 1;
	color: #ff0000;
	transform: translateY(-4rpx);
}

.upload-box {
	width: 200rpx;
	height: 200rpx;
	background-color: #f8f8f8;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
}

.plus-icon {
	position: relative;
	width: 60rpx;
	height: 4rpx;
	background-color: #999;
}

.plus-icon::after {
	content: '';
	position: absolute;
	top: -28rpx;
	left: 28rpx;
	width: 4rpx;
	height: 60rpx;
	background-color: #999;
}

.settings-list {
	background-color: #fff;
	margin-top: 20rpx;
}

.setting-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.setting-title {
	font-size: 30rpx;
	color: #333;
}

.setting-subtitle {
	font-size: 28rpx;
	color: #999;
	margin-right: 10rpx;
}

.setting-arrow {
	color: #999;
	font-size: 28rpx;
}

.description {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.promotion-section {
	background-color: #fff;
	margin-top: 20rpx;
}

.promotion-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
	position: relative;
}

.promotion-left {
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 30rpx;
	color: #333;
}

.question-icon {
	width: 32rpx;
	height: 32rpx;
}

.promotion-switch {
	transform: scale(0.8);
}

.setting-value {
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 28rpx;
	color: #666;
	min-height: 44rpx;
	padding: 10rpx 0;
}

.setting-desc {
	font-size: 24rpx;
	color: #999;
	margin-right: 10rpx;
	flex: 1;
	text-align: right;
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.submit-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 8rpx;
	font-size: 30rpx;
	background-color: #FF6B35;
	color: #fff;
	border: none;
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

.popup-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	z-index: 10000;
	max-height: 80vh;
	overflow-y: auto;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #eee;
}

.cancel-btn {
	color: #666;
	font-size: 28rpx;
}

.title {
	font-size: 32rpx;
	color: #333;
}

.confirm-btn {
	color: #FF6B35;
	font-size: 28rpx;
}

.time-list {
	padding: 20rpx 30rpx;
	max-height: 600rpx;
	overflow-y: auto;
}

.time-section {
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 20rpx;
}

.picker-item {
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.custom-time {
	display: flex;
	gap: 20rpx;
}

.custom-time .picker-item {
	flex: 1;
}

.duration-section {
	padding: 20rpx 0;
}

.duration-options {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.duration-item {
	width: calc((100% - 60rpx) / 4);
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #333;
}

.duration-item.selected {
	background-color: #FFF0EB;
	color: #FF6B35;
	border: none;
}

.duration-item.custom {
	border: 1rpx dashed #999;
	background-color: transparent;
}

.custom-end-time {
	margin-top: 30rpx;
}

.trade-type-list {
	padding: 20rpx 30rpx;
}

.trade-type-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.trade-type-info {
	flex: 1;
}

.trade-type-title {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.trade-type-desc {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.trade-type-check {
	width: 40rpx;
	height: 40rpx;
}

.check-icon {
	width: 100%;
	height: 100%;
}

.trade-type-item.selected {
	background-color: #FFF0EB;
}

.price-input {
	width: 300rpx;
	height: 40rpx;
	font-size: 28rpx;
	color: #666;
	text-align: right;
	background-color: transparent;
	border: none;
}

.description-input {
	width: 300rpx;
	height: 40rpx;
	font-size: 28rpx;
	color: #666;
	text-align: right;
	background-color: transparent;
	border: none;
}

.advanced-settings {
	background-color: #fff;
	padding: 0 30rpx;
}

.advanced-settings .setting-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-top: 1rpx solid #f5f5f5;
}

.advanced-settings .setting-title {
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 30rpx;
	color: #333;
}

.arrow-rotate {
	transform: rotate(90deg);
}

.commission-switch,
.verified-switch {
	transform: scale(0.8);
}

.delay-dropdown {
	margin-top: 1rpx;
	padding: 0;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.delay-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 30rpx;
	border-bottom: 1rpx solid #eee;
	background-color: #fff;
}

.delay-header .title {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.delay-header .cancel-btn {
	color: #666;
	font-size: 28rpx;
	padding: 10rpx;
}

.delay-header .confirm-btn {
	color: #FF6B35;
	font-size: 28rpx;
	padding: 10rpx;
}

.delay-content {
	padding: 30rpx;
	background-color: #fff;
}

.delay-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
}

.delay-picker-view {
	width: 100%;
	height: 320rpx;
	background-color: #fff;
}

.picker-item {
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
}

.picker-item text {
	display: inline-block;
	padding: 0 20rpx;
}

.dropdown-content {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.price-limit-dropdown {
	margin-top: 1rpx;
}

.price-limit-dropdown .delay-content {
	padding-bottom: 40rpx;
}

.time-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.time-grid-item {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #333;
}

.time-grid-item.selected {
	background-color: #FFF0EB;
	color: #FF6B35;
}

.section-title {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 20rpx;
	display: block;
}

.picker-container {
	padding: 30rpx;
}

.picker-view {
	width: 100%;
	height: 480rpx;
}

.picker-item {
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
}

.auction-description {
	width: 100%;
	min-height: 120rpx;
	font-size: 26rpx;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	line-height: 1.5;
	margin-top: 20rpx;
}

.word-count {
	font-size: 24rpx;
	color: #999;
	text-align: right;
	margin-top: 10rpx;
	display: block;
}
</style>